<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/element.css" />
</head><link rel="stylesheet" href="/css/element.css">

<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/formDataUtils.js"></script>
<script src="/js/jquery.min.js"></script>
<style>
    #tools .el-card__body {
        padding: 5px 5px 5px 20px;
    }
    .el-link {
        margin-right:8px;
    }
    #tools .el-button {
        padding: 10px 8px 10px 5px;
    }
    #template {
        height:100%;
    }
    /* #search .el-card__body {
        height:40px;
    } */
    #table {
        height:calc(100% - 120px);
    }
    /*翻页样式*/
    .el-pagination {
        margin-top:5px;
    }
    #tools .el-button {
        padding: 10px 8px 10px 5px;
        background-color:whitesmoke !important;
        color: black !important;
        border: none !important;
      }
      .el-form-item label{
        text-align: left !important;
        width: 86px !important;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .upload
      {
        width: 400px;
        height: 300px;
        border: 1px dashed;
        border-radius: 10px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-repeat:no-repeat!important;
        background-position:center!important;
        background-size: cover!important;
      }
</style>
<div id="template">
    <!--增加系列框-->
    <el-card class="box-card" id="search" >
        <el-form :inline="ture" class="demo-form-inline">
          <el-form-item label="图片简介: ">
            <el-input clearable placeholder= "输入图片简介" style="width:200px;" id="name" v-model="name"  @change="setParam"></el-input>
        </el-form-item>
        <el-form-item>
          </el-form-item>
          <el-upload ref="upload" class="upload" id="upload1"action='...' ::limit="1" :auto-upload="false"
          :show-file-list="false" :on-change="picturePreview" accept="image/png,image/jpg,image/gif,image/jpeg"
          :style="{background:'url('+ImageUrl+')'}"
          >

          <i class="el-icon-plus">
          </i>
          </el-upload>
        </el-form>
</div>
<script>
    Vue.config.productionTip = false;//屏蔽提示信息
    //当前编辑的场景数据
    var sceneData = {};
    var testimg={};//测试用
    //场景id
    var sceneId;
    var tem = new Vue({
        el: "#template",
        data() {
            return {
                name:'',
                infoimg:'',
                ImageUrl:'',
            }
        },methods:{
          picturePreview(file,fileList)
          {
            var URL = null;
            if(window.createObjectURL!=undefined)
            {
              URL=window.createObjectURL(file.raw);
            }else if(window.URL!=undefined)
            {
              URL=window.URL.createObjectURL(file.raw);
            }
            else if(window.webkitURL!=undefined)
            {
              URL=window.webkitURL.createObjectURL(file.raw);
            }
            this.ImageUrl = URL;
            parent.vue.testurl =URL;
            parent.testupload = file.raw;
          },
            setParam(){
                //console.log(parent.parent);
                //console.log(typeof(parent.parent))
                //console.log(parent.parent.addname);
                parent.vue.testname = this.name;
            },
        }

    })
</script>

</html>
